<template>
    <div>
        <div class="sysm-b-main zfbazd-main">
                <h3 class="zfbazd-main-title">
                    <i class="zfbazd-mtitle-icon icon-obj01"></i>
                    <span>在区人员数量：</span>
                    <span class="zfbazd-mtitle-number">{{rqCount}}</span>
                    <i class="zfbazd-mtitle-icon icon-obj02 ml20"></i>
                    <span>空闲审讯室数量：</span>
                    <span class="zfbazd-mtitle-number">{{freeRoomCount}}</span>
                </h3>
                <ul class="sysm-bmain-content clearfix zfbazd-main-centent">
                    <template v-for="(item,i) in listData">
                    
                        <li :class="
                            listData.length == 2 && i == 0 ? 'pr30 w50p'+liCommClass : 
                            listData.length == 2 && i == 1 ? 'pl30 w50p'+liCommClass : 
                            listData.length == 3 && i == 0 ? 'pr40 w33p'+liCommClass : 
                            listData.length == 3 && i == (listData.length-1) ? 'pl40 w33p'+liCommClass : 'pr20 pl20 w33p'+liCommClass  " :key="i">

                            <div :class="'h100p sysm-bmcontent-modu '+ item.bgColorName " @click="toRouter(item.url)">
                                <i :class="item.iconName" :style="item.bgImage == '' ? '' : 'background: url('+item.bgImage+') no-repeat center;'"></i>
                                <p>{{ item.name }}</p>
                            </div>
                        </li>

                    </template>    
                </ul>
                
        </div>
        <div class="zfbazd-footer">
            <div class="h100p pl50 pr50">
                <span id="sbmc" class="fl pore-box"><img src="/static/zfba/img/Left-two-dimensional code.png" height="54px" width="54px" alt=""> <span class="ewmtext">扫描二维码<br>进入手机自助填报</span></span>
                <span class="pl40 fr">联系电话：020-85666585</span><span id="version " class="fr">版本号：TIP-DSAM-K-2PDS-PID015-V2</span>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return {
            liCommClass : ' fl h100p boxsi',
            rqCount:0,
            freeRoomCount:0,
            listData :[
                {name:"入区登记",url:'sbjc',iconName:"sysm-max-icon01",bgColorName:"sysm-bmmodu-bgc01",bgImage:window.SITE_CONFIG.cdnUrl+"/static/zfbaterminal/img/img-bazx-max-icon01.png"},
                {name:"出区登记",url:'cqsbjc',iconName:"sysm-max-icon02",bgColorName:"sysm-bmmodu-bgc02",bgImage:""},
                {name:"相关规定",url:'rlsb',iconName:"sysm-max-icon03",bgColorName:"sysm-bmmodu-bgc03",bgImage:""},
            ]
        }
    },
    created(){
        this.$http({
          url: this.$http.adornUrl("/zfuser/zfinvolvedregistration/getZdCount"),
          method: "get"
        }).then(({ data }) => {
            var result = data.result;
            this.rqCount=result.rqCount;
            this.freeRoomCount=result.freeRoomCount;
        });
    },
    methods:{
        toRouter(o){
            this.vtp.toRouter(this,o);
        }
    }
}
</script>

<style>

</style>